<template>
  <div class="main">
    <!--左侧卡片-->
    <el-col :span="16" class="main">
      <el-card class="maincard" body-style="height:100%">
        <div class="bg">
          <!--左侧表单-->
          <el-col :span="12" class="half">
            <div class="le">
              <el-card class="fo">
                <el-form
                  :model="form"
                  label-width="auto"
                  style="max-width: 600px"
                >
                  <el-form-item label="姓名：">
                    <el-input v-model="form.name" />
                  </el-form-item>
                  <el-form-item label="性别：">
                    <el-radio-group v-model="form.gender">
                      <el-radio value="0">女</el-radio>
                      <el-radio value="1">男</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="身份证号：">
                    <el-input v-model="form.idnum" />
                  </el-form-item>
                  <el-form-item label="电话：">
                    <el-input v-model="form.phone" />
                  </el-form-item>
                  <el-form-item label="紧急联系人电话：">
                    <el-input v-model="form.familyphone" />
                  </el-form-item>
                  <el-form-item label="家庭住址：">
                    <el-input v-model="form.address" />
                  </el-form-item>
                  <el-form-item label="退宿时间：">
                    <el-date-picker v-model="form.time" type="datetime" />
                  </el-form-item>
                  <el-form-item label="备注：">
                    <el-input
                      v-model="form.noties"
                      style="width: 240px"
                      :autosize="{ minRows: 6 }"
                      :rows="2"
                      type="textarea"
                    />
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-col>
          <!--右侧提交-->
          <el-col :span="12" class="half">
            <div class="ri">
              <el-row :span="24" class="haup">
                <div class="photo">
                  <el-card style="width: 80%">
                    <!--提交图片-->
                    <el-upload
                      class="upload-demo"
                      drag
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      multiple
                    >
                      <el-icon class="el-icon--upload"
                        ><upload-filled
                      /></el-icon>
                      <div class="el-upload__text">
                        点击上传图片或 <em>点击这里</em>
                      </div>
                      <template #tip>
                        <div class="el-upload__tip">图片大小不大于500k</div>
                      </template>
                    </el-upload>
                    <div class="under">
                      <el-button class="button">取消</el-button>
                      <el-button type="primary" class="button"
                        >上传图片</el-button
                      >
                    </div>
                  </el-card>
                </div>
              </el-row>
              <el-row :span="12" class="hado">
                <div class="bu2">
                  <el-button class="button">取消</el-button>
                  <el-button type="primary" class="button">提交</el-button>
                </div>
              </el-row>
            </div>
          </el-col>
        </div>
      </el-card>
    </el-col>
    <!--右侧图片-->
    <el-col :span="6" class="aside" :offset="1">
      <div class="aout">
        <el-card class="inout">
          <img src="../../assets/loginPic.jpg" style="width: 100%" />
          <div class="intro">关注我们|电话：18100000000</div>
        </el-card>
      </div>
    </el-col>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { ref } from "vue";

// do not use same name with ref
const form = reactive({});
form.gender = ref("0");
const onSubmit = () => {
  console.log("submit!");
};
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .maincard {
    width: 100%;
    height: 100%;
    .bg {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .half {
        width: 100%;
        height: 100%;
      }
      .le {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .fo {
          width: 80%;
          height: 100%;
          margin-top: 300px;
          margin-bottom: 300px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .ri {
        width: 100%;
        height: 100%;

        .under {
          display: flex;
          justify-content: flex-end;
        }

        .button {
          margin-left: 50px;
        }

        .haup {
          width: 100%;
          height: 80%;

          .photo {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            margin-top: 5%;
          }
        }
        .hado {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-end;
          .bu2 {
            margin-right: 10%;
            margin-top: 15%;
          }
        }
      }
    }
  }
}
.aside {
  width: 100%;
  height: 100%;
  .aout {
    width: 100%;
    height: 100%;
    .inout {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .intro {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
